<ui:composition template="template.xhtml"
				xmlns="http://www.w3.org/1999/xhtml"
				xmlns:c="http://java.sun.com/jsp/jstl/core"
				xmlns:f="http://java.sun.com/jsf/core"
				xmlns:h="http://java.sun.com/jsf/html"
				xmlns:ui="http://java.sun.com/jsf/facelets">


	<ui:define name="head">
		<meta charset="UTF-8"></meta>
		<title>首页</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></link>
		<link rel="stylesheet" href="./css/home.css"></link>
		<!--
                <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        -->
		<!--<script src="https://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>-->
		<!--		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
		<link rel="stylesheet" href="./stylesheets/bootstrap-table.min.css"/>
		<script src="./javascripts/jquery-1.11.2.min.js"></script>
		<script src="./javascripts/bootstrap-table.min.js"></script>
		<script src="./javascripts/bootstrap.min.js"></script>
		<script src="./javascripts/home.js"></script>
		<!--
                <script type="text/javascript" src="home/home.nocache.js" />
        -->
		<!--
                <script type="text/javascript" src="scheduling/scheduling.nocache.js" />
        -->
		<!--
                <script type="text/javascript" src="wizard/wizard.nocache.js" />

        -->
		<script type="text/javascript">
			$(document).ready(function() {
				$('#mytab').bootstrapTable({
					striped : false, //是否显示行间隔色
					pageNumber : 1, //初始化加载第一页
					pagination : true,//是否分页
					sidePagination : 'client',//server:服务器端分页|client：前端分页
					pageSize : 10,//单页记录数
					pageList : [ 5, 10, 20, 30 ,50],//可选择单页记录数
					data:JSON.parse($("#jobsJson").val()),
					columns : [
						{
							title : '任务名称',
							field : 'name',
							halign :'center',
							cellStyle(){
								return{css:{"text-align": "center"}}
							}
						},
						{
							title : '最近执行状态',
							field : 'status',
							halign :'center',
							cellStyle:function(value,row,index){
								if (value==="SUCCESS"){
									return {css:{"background-color":"green","text-align": "center"}}
								}else if(value==="RUNNING"){
									return {css:{"background-color":"#0080C0","text-align": "center"}}
								}else {
									return {css:{"background-color":"red","text-align": "center"}}
								}

							},
							formatter:function (value,row,index) {
								return "SUCCESS"===value?"成功":("FAILURE"===value?"失败":("FAILURE"===value?"挂起":("RUNNING"===value?"运行中":"未知")));
							}
						},
						{
							title : '最近开始时间',
							field : 'beginTime',
							halign :'center',
							cellStyle(){
								return{css:{"text-align": "center"}}
							}
						},
						{
							title : '最近结束时间',
							field : 'endTime',
							halign :'center',
							cellStyle(){
								return{css:{"text-align": "center"}}
							}
						},
						{
							title : '耗时（ms）',
							field : 'cost',
							halign :'center',
							cellStyle(){
								return{css:{"text-align": "center"}}
							}
						},
						{
							title : 'resultId',
							field : 'resultId',
							visible: false
						},
						{
							title : 'triggerType',
							field : 'triggerType',
							visible: false
						},
						{
							title : 'triggerBy',
							field : 'triggerBy',
							visible: false
						},
						{
							title : 'logOutput',
							field : 'logOutput',
							visible: false
						},
						{
							title : 'url',
							field : 'url',
							visible: false
						}
					],
					onClickCell: function(field, value, row, $element) {
						let hosturl=window.location.pathname;
						hosturl=hosturl.substring(0,hosturl.lastIndexOf('/'));
						$("#log_title").text('\''+row.name+'\'');
						$("#log_status").text(row.status);
						$("#log_beginTime").text(row.beginTime);
						$("#log_endTime").text(row.endTime);
						$("#log_triggerType").text(row.triggerType);
						$("#log_triggerBy").text(row.triggerBy);
						$("#log_logOutput").text(row.logOutput);
						$("#log_resultId").text(row.resultId);
						$('#log_resultId').attr('href',hosturl+row.url);
						$('#myModal').modal("show");
					}
				});
			});

		</script>
		<style type="text/css">
			#myModalLabel{
				color: #16c2f4;
			}
			.col-xs-3 {
				width: 20%;
			}
			.modal-dialog {
				width: 700px;
			}
			#log_logOutput{
				height: 200px;
				background-color: #e7e7ec;
			}
		</style>
	</ui:define>



	<ui:define name="content">

		<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">
							<label>任务名称: </label>
							<label id="log_title"></label>
						</h4>
					</div>
					<div class="modal-body">

						<div class="row">
							<span class="col-xs-3">状态:</span>
							<label class="col-xs-9" id="log_status" />
						</div>

						<div class="row">
							<span class="col-xs-3">开始时间:</span>
							<label class="col-xs-9" id="log_beginTime" />
						</div>

						<div class="row">
							<span class="col-xs-3">结束时间:</span>
							<label class="col-xs-9" id="log_endTime" />
						</div>

						<div class="row">
							<span class="col-xs-3">启动:</span>
							<label class="col-xs-9" id="log_triggerType" />
						</div>

						<div class="row">
							<span class="col-xs-3">被谁启动:</span>
							<label class="col-xs-9" id="log_triggerBy" />
						</div>

						<div class="row">
							<span class="col-xs-3">日志输出:</span>
							<textarea class="col-xs-9" id="log_logOutput"></textarea>
						</div>

						<div class="row" style="margin-top: 25px;">
							<span class="col-xs-3">结果:</span>
							<div class="col-xs-9">
								<a class="FormValue" target="_blank" id="log_resultId" />
							</div>
						</div>


					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>

		<div>
			<div style="width: 100%;margin-top: 2px">
				<div class="Row" style="border:1px #000000   solid;width: 59%;float:left;margin-left: 2px;margin-right: 0px;">
					<p class="sp1">总体情况456</p><br/>

					<div class="Column">
						<div onmouseover="showdiv('jobName')" onmouseout="hidediv('jobName')">
							<img src="images/1.png" class="pc"/>
						</div>
						<span class="row1">任务总数</span><br/>
						<span class="row1">#{tenantContext.jobNum}</span>
						<div class="cs" id="jobName">
							<c:forEach items="#{tenantContext.jobsName}" var ="li">
								<li style="height: 1px;text-decoration: underline">${li}</li>
								<br/>
							</c:forEach>
						</div>
					</div>

					<div class="Column">
						<div onmouseover="showdiv('datastoresName')" onmouseout="hidediv('datastoresName')">
							<img src="images/2.png" class="pc"/>
						</div>
						<span class="row1">数据源</span><br/>
						<span class="row1">#{jsfHelper.datastoresNum}</span>
						<div class="cs" id="datastoresName">
							<c:forEach items="#{jsfHelper.datastoresName}" var ="li">
								<li style="height: 1px;text-decoration: underline">${li}</li>
								<br/>
							</c:forEach>
						</div>
					</div>

					<div class="Column">
						<div onmouseover="showdiv('groupsName')" onmouseout="hidediv('groupsName')">
							<img src="images/3.png" class="pc"/>
						</div>
						<span class="row1">时间曲线分析</span><br/>
						<span class="row1">#{tenantContext.timelineFolder.groupsNum}</span>
						<div class="cs" id="groupsName">
							<c:forEach items="#{tenantContext.timelineFolder.groupsName}" var ="li">
								<li style="height: 1px;text-decoration: underline">${li}</li>
								<br/>
							</c:forEach>
						</div>
					</div>

				</div>
				<div class="Row" style="border:1px #000000   solid;width: 40%;float:right;margin-left: 0px;margin-right: 2px;">
					<p class="sp1">今日运行</p><br/>
					<div class="Column">
						<img src="images/4.png" class="pc"/>
						<span class="row1">运行任务</span><br/>
						<span class="row1">#{tenantContext.resultFolder.filesNum}</span>
					</div>

					<div class="Column">
						<img src="images/5.png" class="pc"/>
						<span class="row1">运行结果</span><br/>
						<span class="row1">#{tenantContext.resultFolder.filesNumTd}</span>
					</div>

				</div>
			</div>
			<div style="background-color: #0080C0;margin-top: 10px;clear:both">
				<span></span>
			</div>
			<!--<div style="background-color: #0080C0;margin-top: 20px;clear:both;height: 200px">
				<p class="sp1">重点任务总览</p>
				&lt;!&ndash;<p class="sp1">更多</p>&ndash;&gt
				<input type="submit" value="添加" class="inp"/>
				<div>
					<input type="submit" value="更多..." class="inp2" onclick="location.href='more.xhtml'"/>
				</div>

			</div>-->
			<div id="RootPanelTarget"></div>



			<input id="jobsJson" value="#{tenantContext.jobsJson}" style="display: none"></input>
			<div style="background-color: #0080C0;margin-top: 50px;clear:both;height: 520px">

				<p class="sp1">任务执行日志</p>

				<table id="mytab" class="table table-hover" style="background-color: white"></table>


			</div>
		</div>



	</ui:define>




</ui:composition>
